<template>
	<view class="">
		<view class="modify">
			<view class="modify_list">
				<view class="create_form" style="height: 180rpx;">
					<view class="form_title" style="height: 20%;">
						头像
					</view>
					<view class="form_input" style="height: 80%;display: flex;align-items: center;">
						<image @click="chouse_img" :src="avatar" mode=""></image>
					</view>
				</view>
				<view class="create_form">
					<view class="form_title">
						昵称
					</view>
					<view class="form_input" style="border: none;">
						<input style="padding-top: 20rpx;" type="text" class="gui-form-input" v-model="nickname"
							placeholder="请填写昵称" placeholder-class="input_placeholder" />
					</view>
				</view>
			</view>
		</view>
		<view class="staff_create">
			<view class="create_btn" @click="submit">
				确认修改
			</view>
		</view>
	</view>

</template>

<script>
	import config from "@/config.js"
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				nickname: '',
				avatar: '',
			}
		},
		onLoad() {
			this.getuserinfo()
		},
		methods: {
			getuserinfo() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('zpor/userInfo', {

				}, (result) => {
					uni.hideLoading()
					if (result.code == 1) {
						console.log(result.data)
						this.avatar = result.data.avatar
						this.nickname = result.data.nickname
					}
				})
			},
			chouse_img() {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '正在上传'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: config.siteroot + 'common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token'),
								zcode: config.zcode
							},
							success: (uploadFileRes) => {
								uni.hideLoading()
								that.avatar = JSON.parse(uploadFileRes.data).data.fullurl
							}
						});
					}
				});
			},
			submit() {
				this.$http.Post('zpor/userEdit', {
					nickname: this.nickname,
					avatar: this.avatar,
				}, (result) => {
					uni.hideLoading()
					if (result.code == 1) {
						uni.showToast({
							title: result.msg,
							icon: 'success'
						})
						let userinfo = uni.getStorageSync('userinfo')
						userinfo.avatar = this.avatar
						userinfo.nickname = this.nickname
						uni.setStorageSync('userinfo', userinfo)
						setTimeout(res => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8fa;
	}

	.modify {
		background-color: #fff;
		margin: 24rpx auto;
		width: 92%;
		border-radius: 12rpx;
		border: 1px solid #fff;
	}

	.modify_list {
		margin: 0 24rpx;
	}

	.create_form {
		margin: 20rpx auto;
		width: 94%;
		height: 140rpx;
	}

	.admin_form {
		margin: 20rpx auto;
		width: 94%;
	}

	.form_title {
		color: #b2bcc7;
		font-size: 28rpx;
		font-weight: Normal;
	}

	.form_input {
		border-bottom: 1rpx solid #f1f1f4;
	}

	.form_input>image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.input_placeholder {
		color: #666666;
		font-size: 32rpx;
	}

	.pick_style {
		color: #333;
		font-size: 32rpx;
	}

	.housekeeper {
		width: 100%;
		display: flex;
		margin-top: 28rpx;
		margin-bottom: 40rpx;
	}

	.add_house {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: #ededed;
	}

	.add_house>image {
		width: 80rpx;
		height: 80rpx;
	}

	.type_list {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.lists {
		width: 140rpx;
		height: 60rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fc6564;
		color: #fff;
	}

	.staff_create {
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
	}

	.create_btn {
		width: 94%;
		height: 90rpx;
		border-radius: 60rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fc6564;
		font-size: 32rpx;
	}
</style>